<template>
    <div class="course-reach-info">
        <div class="screen">
            <span class="label">达成度统计：</span>
            <el-select
                v-model="reachId"
                placeholder="选择达成度统计"
                @change="selectReach"
            >
                <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.disabled"
                >
                </el-option>
            </el-select>
            <span class="course-name">课程名称：{{ info.courseName }}</span>
            <div class="update-info">
                <span>数据统计截至 {{ info.jobExeTime ? info.jobExeTime : '暂未更新' }}</span>
                <span
                    v-if="!loading"
                    class="update-btn"
                    @click="updateData"
                >
                    <i class="iconfont icon-refresh"></i>
                    手动更新
                </span>
                <span
                    v-else
                    class="update-btn"
                >
                    <i class="el-icon-loading"></i>
                    正在更新
                </span>
            </div>
        </div>

        <ul class="card">
            <li class="card-item item1">
                <div class="left">
                    <div class="title">{{ info.name }}</div>
                    <div class="editor">
                        <span @click="setInfo(1)">达成度统计名称</span>
                        <img @click="setInfo(1)" src="../../../../assets/images/statistics/editor.png" alt="">
                    </div>
                </div>
                <div class="right">
                    <i class="iconfont icon-tongji3"></i>
                </div>
            </li>
            <li class="card-item item2">
                <div class="left">
                    <div class="reach">
                        <span class="first">{{ (info.score === undefined || info.score === null) ? '暂无成绩' : info.score }}</span>
                        <span class="last">/{{info.thresholdValue }}</span>
                    </div>
                    <div class="editor">
                        <span @click="setInfo(2)">成绩/达成度阈值</span>
                        <img @click="setInfo(2)" src="../../../../assets/images/statistics/editor.png" alt="">
                    </div>
                </div>
                <div class="right">
                    <i class="iconfont icon-kechengbaoming"></i>
                </div>
            </li>
            <li class="card-item item3">
                <div class="left">
                    <div class="name">{{ info.principal }}</div>
                    <div class="editor">
                        <span @click="setInfo(3)">负责人</span>
                        <img @click="setInfo(3)" src="../../../../assets/images/statistics/editor.png" alt="">
                    </div>
                </div>
                <div class="right">
                    <i class="iconfont icon-renwu1"></i>
                </div>
            </li>
            <li class="card-item item4">
                <div class="left">
                    <div class="num">{{ info.studentCount }}</div>
                    <router-link
                        class="editor"
                        tag="div"
                        :to="{
                            name: 'StudentList',
                            query: {
                                id: info.id
                        }}"
                    >
                        <span>学生人数</span>
                        <img src="../../../../assets/images/statistics/add.png" alt="">
                    </router-link>
                </div>
                <div class="right">
                    <i class="iconfont icon-renwu"></i>
                </div>
            </li>
        </ul>

        <courseTarget
            ref="courseTarget"
            :id="reachId"
            :info="info"

        />

        <reachTable
            ref="reachTable"
            :id="reachId"
            :name="info.name"
        />

        <analysisChart
            ref="analysisChart"
            :id="reachId"
        />

        <reachInfoDialog
            ref="reachInfoDialog"
            @update="updateInfo"
        />
    </div>
</template>

<script>
import eventBus from '../../../../utils/eventBus';
import courseTarget from './component/courseTarget/index';
import reachTable from './component/reachTable/index';
import analysisChart from './component/analysisChart';
import reachInfoDialog from './component/reachInfoDialog';
import { courseDetails, updateReach } from '../../../../api/courseReach';

export default {
    components: {
        courseTarget,
        reachTable,
        analysisChart,
        reachInfoDialog,
    },
    data() {
        return {
            reachId: null,
            options: [],
            courseName: '',
            info: {},
            loading: false
        }
    },
    watch: {
        '$route': function() {
            this.init();
        }
    },
    created() {
        this.init();
        eventBus.$on('initHub',()=>{
            this.refresh();
        });
    },

    methods: {
        init() {
            this.options = JSON.parse(localStorage.getItem('REACHLIST')) || [];
            const { id } = this.$route.params;
            this.reachId = Number(id);
        },

        getInfo(id) {
            courseDetails({ id }).then((res) => {
                this.info = res.data;
            }).catch(() => {});
        },

        selectReach(id) {
            this.$router.push({
                name: 'CourseReachInfo',
                params: { id }
            });
        },

        setInfo(type) {
            this.$refs.reachInfoDialog.init(type, this.info);
        },

        updateInfo(key, val, name) {
            if (key == 'name') {
                localStorage.setItem('REACHLIST', JSON.stringify(this.options, (k, v) => {
                    if(k == key) {
                        if (name == v) {
                            return val;
                        }
                    }
                    return v;
                }));
            }

            if (key == 'thresholdValue') {
                this.$refs.reachTable.init();
            }

            this.options = JSON.parse(localStorage.getItem('REACHLIST')) || [];
            this.$set(this.info, key, val);



        },
        updateData() {
            this.loading = true;
            updateReach({
                concludeId: this.reachId
            }).then((res) => {
                this.loading = false;
                this.$refs.reachTable.init();
            }).catch(() => {
                this.loading = false;
            });
        },
        refresh() {
            this.getInfo(this.reachId);
            this.$refs.courseTarget.getList();
            this.$refs.analysisChart.init();
        }
    }
}
</script>
<style lang="scss">
.course-reach-info {
    .screen {
        .el-input__inner {
            width: 260px;
        }

        input::-webkit-input-placeholder {
            color: #BABABA;
            font-size: 14px;
        }
    }

    .no-info {
        text-align: center;
        background: #fff;
        padding: 100px 0;
        p {
            margin-top: 15px;
        }

        .el-loading-mask {
            z-index: 1;
        }
    }
}

</style>

<style lang="scss" scoped>
.course-reach-info {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 244px;
    .screen {
        background: #fff;
        height: 72px;
        padding: 0 41px;
        display: flex;
        align-items: center;
        box-shadow: 0 0 5px 0 rgba(0,0,0,0.05);
        border-radius: 0 0 5px 5px;

        .label,.course-name {
            color: #727272;
        }

        .course-name {
            font-size: 16px;
            margin-left: 26px;
        }

        .update-info {
            margin-left: auto;
            color: #939393;
            font-size: 16px;
            height: 16px;
            .update-btn {
                cursor: pointer;
                color: #385899;
                font-size: 16px;
                margin-left: 21px;
            }
        }
    }

    .card {
        margin-top: 30px;
        display: flex;
        .card-item {
            cursor: pointer;
            border-radius: 5px;
            height: 100px;
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
            transition: all .2s;
            &:hover{
                transform: translateY(-6px);
            }
        }

        li~li {
            margin-left: 20px;
        }

        .item1 {
            width: 310px;
            background: linear-gradient(90deg, #4C93FF, #1DBAF0);
            display: flex;
            padding: 0 10px 0 10px;
            box-sizing: border-box;
            .left {
                display: inline-block;
                margin-right: 4px;
                height: 56px;
                position: relative;
                width: 245x;
                padding-top: 22px;
                .title {
                    color: #fff;
                    font-size: 16px;
                    font-weight: bold;
                    width: 245px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .editor {
                    position: absolute;
                    bottom: 0;
                    cursor: pointer;
                    font-size: 14px;
                    color: #fff;
                    font-weight: 400;
                    span {
                        vertical-align: bottom;
                        margin-right: 4px;
                    }

                    img {
                        height: 16px;
                    }
                }
            }

            .right {
                padding-top: 30px;
                display: inline-block;
                width: 40px;
                .iconfont {
                    font-size: 40px;
                    color: #fff;
                    &::before {
                        vertical-align: text-bottom;
                    }
                }
            }
        }

        .item2 {
            width: 310px;
            background: linear-gradient(90deg, #FF908A, #FF6C88);
            display: flex;
            padding: 0 10px;
            box-sizing: border-box;
            .left {
                flex: 1;
                margin-right: 20px;
                height: 56px;
                position: relative;
                padding-top: 22px;
                .reach {
                    color: #fff;
                    .first {
                        font-size: 24px;
                        font-weight: bold;
                    }
                    .last {
                        font-size: 18px;
                        font-weight: bold;
                    }
                }

                .editor {
                    position: absolute;
                    bottom: 0;
                    cursor: pointer;
                    font-size: 14px;
                    color: #fff;
                    font-weight: 400;
                    span {
                        vertical-align: bottom;
                        margin-right: 4px;
                    }

                    img {
                        height: 16px;
                    }
                }
            }

            .right {
                width: 40px;
                flex-shrink: 0;
                padding-top: 30px;
                .iconfont {
                    font-size: 40px;
                    color: #fff;
                    &::before {
                        vertical-align: text-bottom;
                    }
                }
            }
        }

        .item3 {
            flex: 1;
            background: linear-gradient(90deg, #10BDD8, #37CDC0);
            display: flex;
            padding: 0 10px;
            box-sizing: border-box;
            .left {
                flex: 1;
                height: 56px;
                position: relative;
                padding-top: 22px;
                .name {
                    color: #fff;
                    font-size: 16px;
                    font-weight: bold;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .editor {
                    position: absolute;
                    bottom: 0;
                    cursor: pointer;
                    font-size: 14px;
                    color: #fff;
                    font-weight: 400;
                    span {
                        vertical-align: bottom;
                        margin-right: 4px;
                    }

                    img {
                        height: 16px;
                    }
                }
            }

            .right {
                width: 46px;
                flex-shrink: 0;
                padding-top: 24px;
                .iconfont {
                    font-size: 48px;
                    color: #fff;
                    &::before {
                        vertical-align: text-bottom;
                    }
                }
            }
        }

        .item4 {
            flex: 1;
            background: linear-gradient(90deg, #6186FF, #8B49E8);
            display: flex;
            padding: 0 10px;
            box-sizing: border-box;
            .left {
                flex: 1;
                margin-right: 20px;
                height: 56px;
                position: relative;
                padding-top: 22px;
                .num {
                    color: #fff;
                    font-size: 24px;
                    font-weight: bold;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .editor {
                    position: absolute;
                    bottom: 0;
                    width: 90px;
                    cursor: pointer;
                    font-size: 14px;
                    color: #fff;
                    font-weight: 400;
                    span {
                        vertical-align: bottom;
                        margin-right: 4px;
                    }

                    img {
                        position: relative;
                        top: 2px;
                        height: 22px;
                    }
                }
            }

            .right {
                width: 65px;
                flex-shrink: 0;
                padding-top: 22px;
                text-align: right;
                .iconfont {
                    font-size: 56px;
                    color: #fff;
                    &::before {
                        vertical-align: text-bottom;
                    }
                }
            }
        }
    }
}
</style>
